<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
	#div1 {position: absolute; align-content: center; }
</style>
<script>
	window.onload = function (){
			
		tick();
		
		setInterval(tick,1000);

		
	};
	
	function tick()
	{
			var oDate = new Date();
			var aImg	= document.getElementsByTagName('img');
			
			var str = test(oDate.getHours()) + test(oDate.getMinutes()) + test(oDate.getSeconds());

			for(var i = 0;i<aImg.length; i++)
			{
							aImg[i].src = 'img/' + str.charAt(i) + '.png';
			}
	}
	
	function test(n)
	{
				if(n<10){
					return '0' + n;
				}
		else
			{
				return '' + n;
			}
	}
	
</script>
</head>

<body style="background: black; color: white; font-size: 50px;">
<div id="div1">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
:
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
:
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
</div>
</body>
</html>
